<template>
  <div style="margin-left: 15px">
    <p class="shenqing">详细信息
      <el-button type="success" icon="el-icon-finished" size="mini" style="" @click="savePrice">保存</el-button>
      <el-button
        size="mini"
        type="danger"
        style="margin-left: 10px"
        icon="el-icon-close"
        @click="handleEdit">驳回</el-button>
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-check"
        @click="handleDelete">保存并通过</el-button>
        <el-button type="primary" icon="el-icon-back" size="mini" @click="goback">返回上一页</el-button>
    </p>
    <el-table  :data="tableDatajihua" stripe style="margin-left: 15px;width: 95%"
               border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="物料编码"  property="mno" width="150" ></el-table-column>
      <el-table-column align="center" label="物料名称"  property="mname" width="100" ></el-table-column>
      <el-table-column label="物料规格" property="mmodel" align="center" width="100"> </el-table-column>
      <el-table-column align="center" label="单位"  property="unit"  >
      </el-table-column>
      <el-table-column align="center" label="计划价"  property="planPrice" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.planPrice" placeholder="" @input="keydownBtn(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="需求数" property="demandNum"  :show-overflow-tooltip="true" >
        <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.demandNum" placeholder="" @input="xqkeydownBtn(scope.row)"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="利库数"  property="loseNum" width="100" > </el-table-column>
      <el-table-column align="center" label="金额" property="totalAmount"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="用途" property="useing"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="备注" property="note"  :show-overflow-tooltip="true" > </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
        //记录分页数据
        localPage:undefined,
        localSize:undefined,
        //计划信息
        tableDatajihua:[],
      };
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query)
      // this.tableDatajihua=this.$route.query.data.wzDemandPlanInfos
      this.id = this.$route.query.data.id
       this.XQpage = this.$route.query.page
      this.XQsize = this.$route.query.size
      this.getWLmessage()
      this.price()
    },
    methods: {
      saveBtn:function(row,num){
        var obj={}
        obj.id = row.id
        obj.auditSteps = num
        request({
          url: '/system/demandPlan/steps',
          method: 'put',
          data: obj
        }).then(response => {
          if(response.code=='200'){
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$router.push("/material/procurementSH")
          }
        });
      },
      //返回
      goback () {
         this.$router.push({path:'/material/seccoMaterialLong',query:{page:this.XQpage,size:this.XQsize}});
      },
       //获取数据
      getWLmessage: function () {
         request({
           url:'/system/demandPlan/'+ this.id,
           method:'get',
          //  data:this.applicationData
          }).then(response =>{
            this.tableDatajihua = response.data.wzDemandPlanInfos
            this.price()
            console.log(response)
          })
        },
      //区队需求价格
      price () {
        this.tableDatajihua.forEach(item => {
          item.totalAmount = item.planPrice*(item.demandNum-item.loseNum).toFixed(2)
        });
      },
     //计划价修改
      keydownBtn(row) {
        console.log(row.planPrice)
        if(row.planPrice<0) {
          row.planPrice = 0
          this.$message({
            type:'info',
            message:'计划价不能为空或负数'
          })
        }
        // console.log(this.tableDatajihua)
        this.price()
      },
      //需求数修改
      xqkeydownBtn (row) {
        if(row.demandNum<0) {
          row.demandNum = 0
          this.$message({
            type:'info',
            message:'需求数不能为空或负数'
          })
        }
        this.price()
      },
       //保存
      savePrice () {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.save(this.tableDatajihua)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消保存'
          });
        });
      },
      save (row) {
        request({
          url:'/system/info/batch',
          method:"put",
          data:row
        }).then(response =>{
          console.log(response)
          if(response.code=='200') {
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            // this.$router.go(-1)
            // console.log(123)
            this.goback()
          }
        })
      },
      //驳回
      handleEdit:function () {
        this.$confirm('确认驳回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.saveBtn(this.$route.query.data,5)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消驳回'
          });
        });
      },
      //通过
      handleDelete:function () {
        this.$confirm('确认通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.save(this.tableDatajihua)
          this.saveBtn(this.$route.query.data,6)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消通过'
          });
        });
      },
    }
  };
</script>
<style>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {

    color: #787be8;
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
</style>
